<template>
  <layout>
    <div class="mainContent">
      <div class="main-left">
        <div style="width: 100%; flex: 1">
          <leftBox title="企业总数">
            <div class="leftBoxOne">
              <div>
                <div class="boxOne-top"></div>
                <div class="box-title">23456</div>
                <div class="boxOne-bottom">
                  {{ numberToEncoded(123213) }}<span class="danwei">亿</span>
                </div>
              </div>
              <div>
                <div class="boxTwo-top"></div>
                <div class="box-title">23456</div>
                <div class="boxTwo-bottom">
                  {{ numberToEncoded(123213) }}<span class="danwei">亿</span>
                </div>
              </div>
              <div>
                <div class="boxThree-top"></div>
                <div class="box-title">23456</div>
                <div class="boxThree-bottom">
                  {{ numberToEncoded(123213) }}<span class="danwei">亿</span>
                </div>
              </div>
            </div>
          </leftBox>
        </div>
        <div style="width: 100%; flex: 1">
          <leftBox title="收入分析">
            <leftTwo></leftTwo>
          </leftBox>
        </div>
        <div style="width: 100%; flex: 1">
          <leftBox title="资金分布">
            <leftThree></leftThree>
          </leftBox>
        </div>
      </div>
      <div class="main-center">
       <centerCanvas></centerCanvas>
      </div>
      <div class="main-right">
        <div style="width: 100%; flex: 1">
          <rightBox title="投资规模趋势">
            <rightOne />
          </rightBox>
        </div>
        <div style="width: 100%; flex: 1">
          <rightBox title="投资项目进展">
            <rightTwo />
          </rightBox>
        </div>
        <div style="width: 100%; flex: 1">
          <rightBox title="行业资产TOP3">
            <rightThree />
          </rightBox>
        </div>
      </div>
    </div>
  </layout>
</template>
<script setup lang="ts">
import layout from "@/layout/index.vue";
import leftBox from "@/components/itemLeftBox.vue";
import rightBox from "@/components/itemRightBox.vue";

import centerItem from "./components/centerItem.vue";
import { numberToEncoded } from "@/utils/numbers";
import leftTwo from "./components/leftTwo.vue";
import leftThree from "./components/leftThree.vue";
import rightOne from "./components/rightOne.vue";
import rightTwo from "./components/rightTwo.vue";
import rightThree from "./components/rightThree.vue";
import centerCanvas from "./components/centerCanvas.vue";
</script>
<style scoped>
.mainContent {
  display: flex;
  height: 100%;
}
.main-left,
.main-right {
  width: 500px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.main-center {
  flex: 1;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.center-diqiu {
  width: 280px;
}
.center-left,
.center-right {
  flex: 1;
  margin-top: 115px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.center-left {
  align-items: end;
}
.leftBoxOne {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.leftBoxOne > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.leftBoxOne > div:nth-child(1) {
  align-items: end;
}
.leftBoxOne > div:nth-child(2) {
  align-items: center;
}
.boxOne-top {
  background-image: url("/leftBoxIconOne.png");
}
.boxTwo-top {
  background-image: url("/leftBoxIconTwo.png");
}
.boxThree-top {
  background-image: url("/leftBoxIconThree.png");
}
.boxOne-top,
.boxTwo-top,
.boxThree-top {
  width: 100px;
  height: 70px;

  background-position: center;
  background-size: inherit;
  background-repeat: no-repeat;
}
.box-title {
  font-weight: 600;
  text-align: center;
  width: 100px;
  font-size: 13px;
}
.boxOne-bottom {
  background-image: url("/leftBoxOneValue.png");
}
.boxTwo-bottom {
  background-image: url("/leftBoxTwoValue.png");
}
.boxThree-bottom {
  background-image: url("/leftBoxThreeValue.png");
}
.boxOne-bottom,
.boxTwo-bottom,
.boxThree-bottom {
  width: 100px;
  height: 30px;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 20px;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  line-height: 30px;
}
.danwei {
  font-size: 12px;
}
</style>
